<template>
  <div class="role">
    <!--面包屑-->
    <div class="top_brd">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/admin' }">后台管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/new' }">博客管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--/面包屑-->
    <!-- 新增按钮 -->
    <div class="add_bat"><el-button type="primary" @click="dialogFormVisible = true">添加博客</el-button></div>
    <!-- /新增按钮 -->
    <div class="table_body">
      <!--添加列表-->
      <el-dialog title="添加博客" :visible.sync="dialogFormVisible">
        <el-form :model="New">
          <el-form-item label="博客标题"  :label-width="formLabelWidth"><el-input v-model="New.newHead" autocomplete="off" placeholder="请输入博客标题"></el-input></el-form-item>
          <el-form-item label="创建人名称" :label-width="formLabelWidth"><el-input v-model="New.newJi" autocomplete="off" placeholder="请输入创建人名称"></el-input></el-form-item>
          <el-form-item label="博客分类"  :label-width="formLabelWidth">
            <el-select v-model="New.companyId" placeholder="请选择发布分类" style="width:100%">
              <el-option
                v-for="item in enterpriseNames"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                clearable
                >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="博客内容" :label-width="formLabelWidth"><el-input type="textarea" :rows="5" v-model="New.newsBody" autocomplete="off" placeholder="请输入博客内容"></el-input></el-form-item>
          <el-form-item label="浏览次数" :label-width="formLabelWidth"><el-input v-model="New.memo" autocomplete="off" placeholder="请输入浏览次数"></el-input></el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addUser()">添 加</el-button>
        </div>
      </el-dialog>
      <!--展示列表-->
      <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 1600px;height: 450px" :row-class-name="tableRowClassName">
        <el-table-column prop="id" label="博客编号" width="100px"></el-table-column>
        <el-table-column prop="newHead" label="博客标题" width="200px" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="newsBody" label="发布内容" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="memo" label="浏览次数" width="100px"></el-table-column>
        <el-table-column label="操作" width="190">
          <template slot-scope="scope">
            <el-button size="mini" @click="findUserById(scope.row.id)" icon="el-icon-edit">编辑</el-button>
            <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleted(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--修改信息界面-->
      <el-dialog title="输入信息" :visible.sync="updateFormVisible">
        <el-form>
          <el-form-item label="博客标题" :label-width="formLabelWidth"><el-input v-model="d.newHead" autocomplete="off"></el-input></el-form-item>
          <el-form-item label="相关公司" :label-width="formLabelWidth"><el-select v-model="d.companyId" placeholder="请选择发布公司" style="width:100%">
            <el-option
              v-for="item in enterpriseNames"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              clearable
              >
            </el-option>
          </el-select></el-form-item>
          <el-form-item label="发布内容" :label-width="formLabelWidth"><el-input v-model="d.newsBody" type="textarea" :rows="5" autocomplete="off"></el-input></el-form-item>
          <el-form-item label="浏览次数" :label-width="formLabelWidth"><el-input v-model="d.memo" autocomplete="off"></el-input></el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updateFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateUser()">修 改</el-button>
        </div>
      </el-dialog>
    </div>
    <!--分页-->
    <div class="pag" style="float: left">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="tableData.length"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Role',
  data() {
    return {
      currentPage: 1, //初始页
      pageSize: 5, //    每页的数据
      tableData: [{}], /*查询所有博客*/
      enterpriseNames: [], // 分类名称数组
      New: {},
      d: {} /*查询单条博客*/,
      dialogTableVisible: false,
      dialogFormVisible: false,
      updateFormVisible: false,
      formLabelWidth: '120px'
    };
  },
  methods: {
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function(size) {
      this.pagesize = size;
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
    },
    /* 查询所有的分类 */
    findAllcompany() {
      let _this = this;
      this.$axios
        .get('http://localhost:8087/company/getCompany')
        .then(function(res) {
          _this.selectEnterpriseNames(res.data)
        })
        .catch(function(err) {
          alert('查询失败');
        });
    },
    selectEnterpriseNames(data) {
      console.log(data)
      for (let i = 0; i < data.length; i++) {
        const Enterpriseinfo = { label: '', value: 0 }
        Enterpriseinfo.label = data[i].name
        Enterpriseinfo.value = data[i].id
        this.enterpriseNames.push(Enterpriseinfo)
      }
    },
    /*查询所有的博客*/
    findAll() {
      let _this = this;
      this.$axios
        .get('http://localhost:8087/news/getNews')
        .then(function(res) {
          _this.tableData = res.data;
          console.log("咨询")
          console.log(_this.tableData)
        })
        .catch(function(err) {
          alert('查询失败');
        });
    },
    /*通过单个id查询博客*/
    findUserById(id) {
      this.updateFormVisible = true;
      let _this = this;
      this.$axios
        .get('http://localhost:8087/news/getNewsById/' + id)
        .then(function(res) {
          _this.d = res.data;
        })
        .catch(function(err) {
          alert('查询失败');
        });
    },
    /*更新博客*/
    updateUser() {
      let _this = this;
      // 发送axios请求，根据查询一个
      this.$axios
        .post('http://localhost:8087/news/updateNews', _this.d)
        .then(function(res) {
          alert('角色信息修改成功!');
          _this.updateFormVisible = false;
          _this.findAll();
        })
        .catch(function(err) {});
    },

    /*添加博客*/
    addUser() {
      if (!this.New.newHead) {
        alert('请输入博客标题');
        return false;
      }
      if (!this.New.newJi) {
        alert('请输入博客创建人');
        return false;
      }
      if (!this.New.newsBody) {
        alert('请输入博客内容');
        return false;
      }
      if (!this.New.memo) {
        alert('请填写浏览次数');
        return false;
      }
      let _this = this;
      this.$axios
        .post('http://localhost:8087/news/setNews', this.New)
        .then(function() {
          //清空本次保存数据
          alert('用户信息添加成功！');
          _this.New = {};
          _this.dialogFormVisible = false;
          _this.findAll();
        })
        .catch(function(err) {
          alert('保存或编辑用户信息失败，请稍后再试');
        });
    },
    /*删除博客*/
    deleted(id) {
      let _this = this;
      if (window.confirm('确定要删除当前博客吗？')) {
        // 发送axios请求，根据查询一个
        this.$axios
          .post('http://localhost:8087/news/deletedById/' + id)
          .then(function() {
            _this.findAll();
            alert('博客删除成功！');
          })
          .catch(function(err) {
            alert('删除失败,请联系管理员！');
          });
      }
    },
    /*颜色*/
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    }
  },
  created() {
    this.findAll();
    this.findAllcompany();
    console.log(this.enterpriseNames)
  }
};
</script>

<style scoped>
.top_brd {
  margin-left: 37px;
  margin-top: 10px;
  width: 100%;
  height: 50px;
}
.add_bat {
  float: right;
  padding-right: 20px;
}
.table_body {
  padding-left: 37px;
}
</style>
